<template>
  <div class="reco_list">
    <div
      v-for="song in reco_songs"
      :key="song.id"
      @click="to_detail(song.id)"
      class="reco_item"
    >
      <!-- 图片 -->
      <album-img :picUrl="song.picUrl" :play_count="song.playCount"></album-img>
      <!-- 文字 -->
      <p class="reco_text">{{ song.name }}</p>
    </div>
  </div>
</template>

<script>
import AlbumImg from "@/components/common/AlbumImg";
export default {
  props: ["reco_songs"],
  components: {
    AlbumImg,
  },
  methods: {
    // 跳转专辑详情页
    to_detail(id) {
      this.$router.push({
        name: "AlbumDetail",
        params: {
          id: id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.reco_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .reco_item {
    width: 32.8%;
    padding-bottom: 20px;
    .reco_text {
      font-size: 14px;
      padding: 5px 5px 0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}
</style>
